<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset = "UTF-8">
    <script src="{{url_for('static',filename='js/jquery.min.js')}}"></script>
    <script src="{{url_for('static',filename='js/bootstrap.min.js')}}"></script>
    <script src="{{url_for('static',filename='js/jquery.dataTables.min.js')}}"></script>
    <link rel="stylesheet" href="{{url_for('static',filename='css/jquery.dataTables.min.css')}}">
    <link rel="stylesheet" href="{{url_for('static',filename='css/bootstrap.min.css')}}">
    <style>
    .button{
        background-color: white;
        color: black;
        border: 2px solid rgb(68,113,188);
    }

    .button:hover {
        background-color: rgb(68,113,188);
        color: white;
    }
    </style>
    <title>进程管理</title>
</head>
<body>
<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
    <div class="navbar-header">
        <a class="navbar-brand" href="#">盯盘宝后台管理系统</a>
    </div>
    <div>
        <ul class="nav navbar-nav">
            <li ><a href="{{ url_for('start_web') }}">首页</a></li>
            <li ><a href="{{ url_for('permission_manage') }}">权限配置</a></li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                    管理员{{ session['admin'] if session['admin'] else "未登录" }}
                    <b class="caret"></b>
                </a>
                <ul class="dropdown-menu">
                    <li><a href="{{ url_for("login_out") }}">退出</a></li>
                </ul>
            </li>
        </ul>
    </div>
    </div>
</nav>


<div align="center">
    <div style="width:40%;">
<h3>进程搜索(请输入.py前面文件名)</h3>
 <div class="input-group">
     <input type="text" class="form-control" id="search-input" />
     <span class="input-group-addon"><a href="#" onclick="searchProc()"><i class="glyphicon glyphicon-search"> <span>搜索</span></i></a></span>
 </div>
</div>
</div>
<br/>
<br/>
    <div class="row" align="center" style="border:1px solid rgb(68, 113, 188);">
    <div id ="proc_checkbox"  style="width:80%;">

    </div>
        <br/>
    <div align="center">
        <div class="btn-group btn-group-lg" role="group" aria-label="...">
        <div class="btn-group" role="group" align="center">
        <button type="button" class="btn btn-primary" onclick="rebootSelectProc()">一键重启</button>
        </div>
        <div class="btn-group" role="group" align="center">
        <button type="button" class="btn btn-primary" onclick="allIn(true)">全选</button>
        </div>
        <div class="btn-group" role="group" align="center">
        <button type="button" class="btn btn-primary" onclick="allIn(false)">全不选</button>
        </div>
        </div>
    </div>
        <br/>
    </div>
    <br/>
    <br/>
<div align="center">

<div class="btn-group btn-group-lg" role="group" aria-label="...">

    <div class="btn-group" role="group">
    <button id ="proc" type="button" class="btn btn-default" onclick="changeDisplay('proc')">web进程管理</button>
    </div>

    <div class="btn-group" role="group">
    <button id ="schedule_task" type="button" class="btn btn-default" onclick="changeDisplay('schedule_task')">web定时任务</button>
    </div>

</div>
</div>
<table id="web_proc" style="border: 1px solid rgb(68,113,188)" border="1"></table>
<table id="web_schedule_task" style="border: 1px solid rgb(68,113,188)" border="1"></table>
<br/>
<br/>
<script>
var result = {{ result|tojson}};
var obj = JSON.parse(result);
var procList = obj.procList;
var htmlStr = "";
for (var i=0;i<procList.length;i++){
    htmlStr +=
    "<label class=\"checkbox-inline\">" +
    "<input class=\"proc-checkbox\" type=\"checkbox\" id=\"inlineCheckbox1\" value=\"" + procList[i] +
    "\">" + procList[i] +
    "</label>";
}

function searchProc() {
    var procName = $("#search-input").val();
     $.ajax({
    url:"/procManageSearchProc",
    async:true,
    type:"POST",
    data:JSON.stringify({"procName":procName}),
    dataType:"json",
    success:function (result) {
        var message = result.message;
        alert(message);
    }
});
}

function allIn(flag){
    if (flag){
          $(".proc-checkbox").each(function (key,value) {
        $(value).prop("checked",true);
        });
    }else{
        $(".proc-checkbox").each(function (key,value) {
        $(value).prop("checked",false);
        });
    }
}
$("#proc_checkbox").html(htmlStr);

$('#web_proc').DataTable({
"paging":false,
"ordering": false,
"info":     false,
data: obj["resultList"],
columns: [
    { title: "进程名" },
    { title: "路径" },
    {title:"描述"},
    {title:"进程id"},
    {title:"进程启动时间"},
    {title:"重启进程"}
],
"columnDefs": [
{
    // targets用于指定操作的列，从第0列开始，-1为最后一列，这里第六列
    // return后边是我们希望在指定列填入的按钮代码
    "targets": -1,
    "render": function ( data, type, full, meta ) {
        return "<input type= 'button' onclick='rebootProc(\""+ full[0] + "\")' class = 'button' value = '重启'>";
    }
}
],
});

$('#web_schedule_task').DataTable({
"paging":false,
"ordering": false,
"info":     false,
data: obj["scheduleTaskList"],
columns: [
    { title: "函数" },
    { title: "模块" },
    {title:"计划开始时间"},
    {title:"结束时间"},
    {title:"重启"}
],
"columnDefs": [
{
    // targets用于指定操作的列，从第0列开始，-1为最后一列，这里第六列
    // return后边是我们希望在指定列填入的按钮代码
    "targets": -1,
    "render": function ( data, type, full, meta ) {
        return "<input type= 'button' class = 'button' value = '重启'>";
    }
}
],
});

function rebootSelectProc() {
    var procList = [];
    $(".proc-checkbox").each(function (key,value) {
        if ($(value).is(':checked')){
            var value = $(value).val();
            procList.push(value);
        }
    });
    rebootProc(procList);
}

function rebootProc(proc) {
    var procList = [];
     if (jQuery.type(proc) == 'string'){
         procList.push(proc);
     }else{
         procList = proc;
     }
     $.ajax({
        url:"/procManageRebootProc",
        async:true,
        type:"POST",
        data:JSON.stringify({"procList":procList}),
        dataType:"json",
        success:function (result) {
            var message = result.message;
            alert(message);
        }
    });
}
    function changeDisplay(type){
        $("#proc").css("background-color","white");
        $("#schedule_task").css("background-color","white");
        var color="rgb(68,113,188)";
        $("#"+type).css("background-color",color);
        $("#web_proc").hide();
        $("#web_schedule_task").hide();
        $("#web_schedule_task_filter").find("label").hide();
        $("#web_proc_filter").find("label").hide();
        $("#web_"+type).show();
        $("#web_"+type+"_filter").find("label").show();
        }
    changeDisplay("proc");
</script>
</body>
</html>